<template>
  <div class="my-form">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio v-for="(type, index) in typeList" :key="index" :label="type"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动密码" prop="password">
        <el-input v-model="ruleForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="活动人数" prop="number">
        <el-input-number v-model="ruleForm.number" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="所需时间" prop="requiredTime">
        <el-input-number v-model="ruleForm.requiredTime" :step="0.5" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item
        label="截止时间"
        prop="deadline">
        <el-date-picker
          v-model="ruleForm.deadline"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        v-for="(task, index) in ruleForm.task"
        :label="'任务' + index"
        :key="'任务' + index"
      >
        <el-input v-model="ruleForm.task[index]"></el-input>
        <el-button @click.prevent="removeTask(index)">删除</el-button>
      </el-form-item>
      <el-form-item
        v-for="(time, index) in ruleForm.time"
        :label="'时间' + index"
        :key="'时间' + index"
      >
        <el-date-picker
          v-model="ruleForm.time[index]"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <el-button @click.prevent="removeTime(index)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="addTask">新增任务</el-button>
        <el-button @click="addTime">新增时间</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Create',
  data () {
    return {
      ruleForm: {
        name: '',
        type: '',
        password: '',
        number: 10,
        requiredTime: 1,
        deadline: '',
        task: [''],
        time: [''],
        createUser: this.$store.state.user.user.username
      },
      typeList: ['conference', 'sport', 'banquet', 'classroom', 'party', 'travel'],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择活动类型', trigger: 'change' }
        ],
        deadline: [
          { required: true, message: '时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          this.axios.post(
            'create_activity/',
            { ...this.ruleForm }
          ).then(res => {
            if (res.result) {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.ruleForm = {
                name: '',
                type: '',
                password: '',
                number: 10,
                requiredTime: 1,
                deadline: '',
                task: [''],
                time: [''],
                createUser: this.$store.state.user.user.username
              }
            }
          })
        } else {
          this.$message({
            message: '提交失败',
            type: 'warning'
          })
          return false
        }
      })
    },
    removeTask (index) {
      this.ruleForm.task.splice(index, 1)
    },
    removeTime (index) {
      this.ruleForm.time.splice(index, 1)
    },
    addTask () {
      this.ruleForm.task.push('')
    },
    addTime () {
      this.ruleForm.time.push('')
    }
  }
}

</script>

<style scoped>
.my-form{
  box-sizing: border-box;
  min-height: 100%;
  background-color: #eeeeee;
  padding: 1vh 1vw;
}
</style>
